<template>
  <div id="outboundIndex">
    <el-row>
      <!-- 表格查询条件 -->
      <el-col :span="24">
        <el-form :inline="true" ref="stationForm" :model="queryForm">
          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="出库单名称/编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.userName" placeholder="出库人"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.warehouseName" placeholder="出库仓库"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.recordTypeCount" placeholder="出库类目数"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
            <el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" @click="dialog.isEdit=false;dialog.saveOrEditDiv=true">出库单出库</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
              <el-button slot="reference" type="danger" icon="el-icon-delete">删除出库单</el-button>
            </el-popconfirm>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="code" label="编号"></el-table-column>
              <el-table-column prop="name" label="出库单名称"></el-table-column>
              <el-table-column prop="userName" label="出库人" width="75"></el-table-column>
              <el-table-column prop="warehouseName" label="出库仓库"></el-table-column>
              <el-table-column prop="outboundTime" label="出库时间"></el-table-column>
              <el-table-column prop="recordTypeCount" label="出库类目数" width="100"></el-table-column>
              <el-table-column prop="outCount" label="出库总量" width="100"></el-table-column>
              <el-table-column label="是否关联订单" width="110">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.orderID!=null" type="success">已关联</el-tag>
                  <el-tag v-else type="danger">未关联</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="110">
                <template slot-scope="scope">
                  <el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
<!--                  <el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>-->
                  <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="tableSizeChange"
              @current-change="tableCurrentChange"
              :current-page="pageData.page"
              :page-sizes="[10, 20, 40, 100]"
              :page-size="pageData.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 添加或修改-业务弹窗 -->
    <el-dialog
      :title="dialog.isEdit == true ? '编辑出库单' : '新增出库单'"
      :visible.sync="dialog.saveOrEditDiv"
      width="90%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData.outbound" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="出库仓库" prop="warehouseID">
              <el-select style="width: 100%" v-model="saveOrEditData.outbound.warehouseID" @change="warehouseSelectChange" filterable clearable placeholder="请选择出库仓库">
                <el-option
                  v-for="item in warehouseDataList"
                  :key="item.warehouseID"
                  :label="item.name"
                  :value="item.warehouseID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库人" prop="userID">
              <el-select style="width: 100%" v-model="saveOrEditData.outbound.userID" @change="userSelectChange" filterable clearable placeholder="请选择出库处理人">
                <el-option
                  v-for="item in staffDataList"
                  :key="item.staffID"
                  :label="item.name"
                  :value="item.staffID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="comment">
              <el-input
                show-word-limit
                maxlength="150"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="如需备注输入描述"
                v-model="saveOrEditData.outbound.comment"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-divider content-position="left"><i class="el-icon-warning" style="color: red"></i>注意：请选择出库仓库后在选择物资出库，重新选择仓库将重置已完成的物资选择</el-divider>
          <el-button type="primary" @click="addRowToCk">添加出库物资</el-button>
        </el-row>
        <el-row style="margin-top: 10px" v-for="(item,index) in saveOrEditData.infoList" :key="index">
          <el-col :span="10">
            <el-form-item label="出库物资">
              <el-select style="width: 100%" v-model="saveOrEditData.infoList[index].recordID" @change="recordSelectChange(item,index)" filterable clearable placeholder="请选择出库物资(请勿重复选择)">
                <el-option
                  v-for="item in recordDataList"
                  :key="item.recordID"
                  :label="item.name"
                  :value="item.recordID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="出库数量">
              <el-input type="number" v-model="saveOrEditData.infoList[index].outCount" placeholder="请输入出库数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="danger" size="small" icon="el-icon-delete" @click="removeRowToCk(item.uid)" circle></el-button>
          </el-col>
        </el-row>
        <!-- 按钮组 -->
        <el-form-item>
          <el-divider></el-divider>
          <el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
          <el-button
            @click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
          >
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加或修改-业务弹窗 -->
    <el-dialog
      title="出库单详情"
      :visible.sync="dialog.showDiv"
      width="85%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item label="编号">{{ showData.outbound.code }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ showData.outbound.name }}</el-descriptions-item>
        <el-descriptions-item label="出库人">{{ showData.outbound.userName }}</el-descriptions-item>
        <el-descriptions-item label="出库时间">{{ showData.outbound.outboundTime }}</el-descriptions-item>
        <el-descriptions-item label="出库仓库">{{ showData.outbound.warehouseName }}</el-descriptions-item>
        <el-descriptions-item label="类目数量">{{ showData.outbound.recordTypeCount }}</el-descriptions-item>
        <el-descriptions-item label="出库总量">{{ showData.outbound.outCount }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ showData.outbound.comment }}</el-descriptions-item>
      </el-descriptions>
      <!-- 出库明细 -->
      <el-divider content-position="left">出库明细</el-divider>
      <el-table :data="showData.infoList" border style="width: 100%" >
        <el-table-column prop="recordName" label="出库物资"></el-table-column>
        <el-table-column prop="outCount" label="出库数量"></el-table-column>
      </el-table>
      <el-button
        @click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
      >
        关闭
      </el-button>
    </el-dialog>


  </div>
</template>

<script>
import * as warehouseAPI from '@/api/wms/warehouse.js';
import * as staffAPI from '@/api/staff.js';
import * as recordAPI from '@/api/wms/record.js';
import * as axiosAPI from '@/api/wms/outbound.js';

export default {
  name: 'outboundIndex',
  data() {
    return {
      //查询表单数据
      queryForm: {
        name: null,
        userName: null,
        warehouseName: null,
        recordTypeCount: null
      },
      //表格数据
      tableData: [],
      //主表-分页数据
      pageData: {
        page: 1,
        size: 10,
        total: 0
      },
      //当前表格复选数据
      nowTableSelected: [],
      // 仓库下拉
      warehouseDataList:[],
      // 人员下拉
      staffDataList:[],
      // 物资下拉
      recordDataList:[],
      //弹窗状态
      dialog: {
        isEdit: false,
        saveOrEditDiv: false,
        showDiv: false
      },
      //添加或编辑表单数据
      saveOrEditData: {
        outbound:{
          outboundID:null,
          comment:null,
          code:null,
          name:null,
          userID:null,
          userName:null,
          outboundTime:null,
          warehouseID:null,
          warehouseName:null,
          recordTypeCount:null,
          outCount:null,
          orderID:null
        },
        infoList:[]
      },
      //添加编辑表单-检验
      saveOrEditDataFormRules:{
        userID: { required: true, message: '请输选择出库人', trigger: 'change' },
        warehouseID: { required: true, message: '请选择出库仓库', trigger: 'change' }
      },
      //展示表单数据
      showData: {
        outbound:{
          outboundID:null,
          comment:null,
          code:null,
          name:null,
          userID:null,
          userName:null,
          outboundTime:null,
          warehouseID:null,
          warehouseName:null,
          recordTypeCount:null,
          outCount:null,
          orderID:null
        },
        infoList:[]
      },
      //表单加载值
      formLoading: false
    };
  },
  mounted() {
    this.initWarehouseList();
    this.initStaffList();
    this.getTableDatas();
  },
  methods: {
    // 物资下拉列表初始化
    initRecordList(){
      let _this = this;
      recordAPI.list({"warehouseID":_this.saveOrEditData.outbound.warehouseID})
        .then(function(res){
          if(res.code == "0000"){
             _this.recordDataList = res.data;
          }
        })
    },
    // 仓库下拉列表初始化
    initWarehouseList(){
      let _this = this;
      warehouseAPI.list()
        .then(function(res){
          if(res.code == "0000"){
            _this.warehouseDataList = res.data;
          }
        })
    },
    // 人员下拉列表初始化
    initStaffList(){
      let _this = this;
      staffAPI.list({"name":null})
        .then(function(res){
          if(res.code == "0000"){
            _this.staffDataList = res.data;
          }
        })
    },
    //查询表格数据
    getTableDatas() {
      let _this = this;
      axiosAPI.pages(_this.queryForm, _this.pageData)
        .then(function(response) {
          console.log(response);
          if (response.code == '0000') {
            _this.tableData = response.data.rows;
            _this.pageData.total = response.data.total;
          }
        });
    },
    //重置查询条件表单
    resetQueryForm() {
      this.queryForm = {
        name: null,
        userName: null,
        warehouseName: null,
        recordTypeCount: null
      };
      this.getTableDatas();
    },
    //重置添加、编辑、展示表单
    resetAddOrEditOrShowForm() {
      this.showData = {
        outbound:{
          outboundID:null,
          comment:null,
          code:null,
          name:null,
          userID:null,
          userName:null,
          outboundTime:null,
          warehouseID:null,
          warehouseName:null,
          recordTypeCount:null,
          outCount:null,
          orderID:null
        },
        infoList:[]
      };
      this.saveOrEditData = {
        outbound:{
          outboundID:null,
          comment:null,
          code:null,
          name:null,
          userID:null,
          userName:null,
          outboundTime:null,
          warehouseID:null,
          warehouseName:null,
          recordTypeCount:null,
          outCount:null,
          orderID:null
        },
        infoList:[]
      };
    },
    //提交-添加、编辑表单
    submitSaveOrEdit() {
      let _this = this;
      this.$refs.saveOrEditDataForm.validate(valid => {
        if (valid) {
          this.formLoading = true;
          axiosAPI.add(_this.saveOrEditData)
            .then(function(res) {
              if (res.code == '0000') {
                _this.dialog.saveOrEditDiv = false;
                _this.resetAddOrEditOrShowForm();
                _this.formLoading = false;
                _this.getTableDatas();
              } else {
                _this.formLoading = false;
              }
            });
        }
      });
    },
    //提交-删除
    submitDelete(ids){
      let _this = this;
      axiosAPI.deletes(ids)
        .then(res => {
          if (res.code == '0000') {
            _this.getTableDatas();
          }
        });
    },
    //分页条目数切换
    tableSizeChange(size) {
      this.pageData.size = size;
      this.getTableDatas();
    },
    //页码切换
    tableCurrentChange(page) {
      this.pageData.page = page;
      this.getTableDatas();
    },
    //行-查看
    rowShow(data) {
      var _this = this;
      axiosAPI.getByID(data.outboundID)
        .then(function(res){
          if(res.code == "0000"){
            _this.showData = res.data;
            _this.dialog.showDiv = true;
          }
        });
    },
    //行-编辑
    rowEdit(data) {
      this.dialog.saveOrEditDiv = true;
      this.saveOrEditData = JSON.parse(JSON.stringify(data));
      this.dialog.isEdit = true;
    },
    //行-删除
    rowDelete(data) {
      this.$confirm('确定要删除这行数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(data.outboundID);
      });
    },
    //点击批量删除
    moreDeletes() {
      if(this.nowTableSelected.length<=0){
        this.$notify.warning({
          title: '删除提示',
          message: '请至少选择一条数据再删除'
        });
        return;
      }
      let ids = '';

      for (var i in this.nowTableSelected) {
        ids += this.nowTableSelected[i].outboundID + ',';
      }

      ids = ids.substring(0, ids.length - 1);

      //调用删除
      this.submitDelete(ids);
    },
    //表格批量选择
    tableDataSelected(data){
      this.nowTableSelected = data;
    },
    // 出库人选择
    userSelectChange(data){
      if(data!=""){
        var resData = null;
        for(var i in this.staffDataList){
          if(this.staffDataList[i].staffID == data){
            resData = this.staffDataList[i];
            break;
          }
        }
        this.saveOrEditData.outbound.userID = resData.staffID;
        this.saveOrEditData.outbound.userName = resData.name;
      }else{
        this.saveOrEditData.outbound.userID = null;
        this.saveOrEditData.outbound.userName = null;
      }
    },
    // 出库仓库选择
    warehouseSelectChange(data){
      if(data!=""){
        var resData = null;
        for(var i in this.warehouseDataList){
          if(this.warehouseDataList[i].warehouseID == data){
            resData = this.warehouseDataList[i];
            break;
          }
        }
        this.saveOrEditData.outbound.warehouseID = resData.warehouseID;
        this.saveOrEditData.outbound.warehouseName = resData.name;

        this.initRecordList();

      }else{
        this.saveOrEditData.outbound.warehouseID = null;
        this.saveOrEditData.outbound.warehouseName = null;
      }

      this.saveOrEditData.infoList = [];
    },
    // 添加要出库物资-行
    addRowToCk(){

      if(!this.saveOrEditData.outbound.warehouseID){
        this.$notify.warning({
          title: '出库操作提示',
          message: '请选择出库仓库后在选择物资出库'
        });
        return;
      }

      var data = {
        uid:this.saveOrEditData.infoList.length,
        recordID:null,
        recordName:null,
        outCount:0
      }

      this.saveOrEditData.infoList.push(data);
    },
    // 要出库物资行删除
    removeRowToCk(uid){
      var index = 0;
      for(var i in this.saveOrEditData.infoList){
        if(this.saveOrEditData.infoList[i].uid == uid){
          index = i;
          break;
        }
      }

      this.saveOrEditData.infoList.splice(index,1);
    },
    // 出库物资行-选择物资
    recordSelectChange(data,index){
      if(data.recordID!=""){

        var resData = null;
        for(var i in this.recordDataList){
          if(this.recordDataList[i].recordID == data.recordID){
            resData = this.recordDataList[i];
            break;
          }
        }
        this.saveOrEditData.infoList[index].recordName = resData.name;

      }else{
        this.saveOrEditData.infoList[index].recordID = null;
        this.saveOrEditData.infoList[index].recordName = null;
      }
    }

  }
};
</script>

<style scoped></style>
